<template>
	<view>
		<!-- <uni-section title="查询" sub-title="根据用户条件查询" type="line">
			<view class="example">
				<uni-forms ref="form" :modelValue="queryParams">
					<uni-forms-item label="账号" name="">
						<uni-easyinput v-model="queryParams.username" placeholder="" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section> -->
		<uni-section title="操作区域" sub-title="仅有权操作「普通用户」,管理员账户由最高管理员统一管理" type="line">
			<view class="example">
				<button type="primary" plain size="mini" @click="openAddUserPopup">新增</button>
			</view>
		</uni-section>
		<uni-table stripe emptyText="暂无更多数据">
			<uni-tr>
				<uni-th width="80" align="center">账号</uni-th>
				<uni-th width="120" align="center">用户名</uni-th>
				<uni-th width="50" align="center">头像</uni-th>
				<uni-th width="120" align="center">操作</uni-th>
			</uni-tr>
			<uni-tr v-for="item in users">
				<uni-td align="center">{{item.username}}</uni-td>
				<uni-td align="center">
					<view>
						{{`${item.realname}(${item.isAdmin == 1? "管理员":"用户"})`}}
						<!-- <uni-tag class="tag" :text="item.isAdmin == 1 ? '管理员':'用户'" :type="item.isAdmin == 1 ? 'error':'success'" size="mini" ></uni-tag> -->
					</view>
					<view style="font-size: 25rpx;">{{item.email}}</view>
				</uni-td>
				<uni-td align="center">
					<image :src="baseUrl+item.avatar" mode="" class="logoImage"></image>
				</uni-td>
				<uni-td align="center">
					<view class="uni-group">
						<button class="uni-button" size="mini" type="primary" @click="resetPwd(item)">重置</button>
						<button class="uni-button" size="mini" type="warn" @click="deleteUser(item)">删除</button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-popup ref="addUserPopup" type="bottom">
			<view class="add-user-view">
				<uni-section title="新增用户" sub-title="注:新建仅普通用户,无法新建管理员!" type="line">
					<view class="example">
						<uni-forms ref="addUserForm" :rules="addUserRules" :modelValue="addUserParams">
							<uni-forms-item label="账号" name="username" required>
								<uni-easyinput v-model="addUserParams.username" placeholder="请输入用户名" />
							</uni-forms-item>
							<uni-forms-item label="姓名" name="realname" required>
								<uni-easyinput v-model="addUserParams.realname" placeholder="请输入昵称(建议真实姓名)" />
							</uni-forms-item>
							<uni-forms-item label="邮箱" name="email" required>
								<uni-easyinput type="email" v-model="addUserParams.email" placeholder="请输入邮箱" />
							</uni-forms-item>
							<uni-forms-item label="密码" name="password">
								<uni-easyinput v-model="addUserParams.password" placeholder="请输入密码,不填自动生成" />
							</uni-forms-item>
						</uni-forms>
						<button type="primary" @click="addUser" class="btn">新增</button>
					</view>
				</uni-section>
			</view>
		</uni-popup>

		<uni-popup ref="resetPassworedPopup" type="bottom">
			<view class="add-user-view">
				<uni-section title="重置密码" :sub-title="`您现在正在重置「${tempUserData.realname}」的密码`" type="line">
					<view class="example">
						<uni-forms ref="form" :modelValue="resetPassword">
							<uni-forms-item label="密码" name="password">
								<uni-easyinput type="password" v-model="resetPassword.password" placeholder="请输入新密码" />
							</uni-forms-item>
							<uni-forms-item label="确认密码" name="password">
								<uni-easyinput type="password" v-model="resetPassword.confirmPassword"
									placeholder="再次输入新密码" />
							</uni-forms-item>
						</uni-forms>
						<button type="primary" @click="resetPwdBtn()" class="btn">重置</button>
					</view>
				</uni-section>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/common/apiUtil.js'
	export default {
		data() {
			return {
				baseUrl: api.SERVER_BASE,
				users: null,
				tempUserData: {},
				queryParams: {
					username: null,
					realname: null
				},
				addUserParams: {
					username: null,
					realname: null,
					email: null,
					password: null,
					isAdmin: 0
				},
				addUserRules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请输入账号'
						}],
					},
					realname: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱'
						}]
					}
				},
				resetPassword: {
					userId: null,
					password: null,
					confirmPassword: null
				}
			}
		},
		mounted() {
			if (this.$refs.addUserForm) {
				this.$refs.addUserForm.setRules(this.addUserRules);
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData() {
				this.$get(api.GET_USER_LIST).then(res => {
					console.log(res)
					this.users = res.result.records
				})
			},
			openAddUserPopup() {
				this.$refs.addUserPopup.open("center");
			},
			addUser() {
				this.$refs.addUserForm.validate();
				this.$post(api.POST_USER_ADD, this.addUserParams).then(res => {
					console.log(res)
					if (!res.success) {
						uni.showToast({
							title: res.message,
							icon: "none"
						});
						return;
					}
					this.$refs.addUserPopup.close();

					uni.showModal({
						title: '初始密码',
						content: res.message,
						cancelText: '我知道了',
						confirmText: '复制密码',
						success: res => {
							if (res.confirm) {
								uni.setClipboardData({
									data: res.result,
									success: res => {
										uni.showToast({
											title: '复制成功',
											icon: "none"
										});
									}
								})

							}
						},
						fail: () => {},
						complete: () => {}
					});

					this.getData()
				})
			},
			deleteUser(item) {
				console.log(item)
				uni.showModal({
					title: '误触确认',
					content: `确定要删除${item.realname}吗?`,
					cancelText: '取消',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$get(api.GET_DELETE_USER + item.id).then(res => {
								console.log(res)
								uni.showToast({
									title: res.message,
									icon: "none"
								});
								if (res.success) {
									this.getData();
									return;
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			resetPwd(item) {
				this.$refs.resetPassworedPopup.open("center");
				this.resetPassword.userId = item.id;
				this.tempUserData = item;
			},
			resetPwdBtn(){
				console.log(this.resetPassword)
				let pwd1 = this.resetPassword.password;
				let pwd2 = this.resetPassword.confirmPassword;
				if(pwd1 == null || pwd2 == null){
					uni.showToast({
						title: '请补全输入框!',
						icon:"none"
					});
					return;
				}
				if(pwd1 != pwd2){
					uni.showToast({
						title: '两次密码输入不一致！',
						icon:"none"
					});
					return;
				}
				
				this.$post(api.POST_RESET_PASSWORD,this.resetPassword).then(res => {
					console.log(res)
					uni.showToast({
						title: res.message,
						icon:"none"
					});
					
					if(res.success){
						this.$refs.resetPassworedPopup.close();
					}
				})
			}

		}
	}
</script>

<style>
	.logoImage {
		width: 80rpx;
		height: 80rpx;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.add-user-view {
		background-color: #fff;
		width: 700rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.tag {
		border-radius: 10rpx !important;
		margin-left: 10rpx;
	}

	.btn {
		width: 350rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
</style>